<template>
    <view class="container">
        <z-paging
            ref="paging"
            :refresher-out-rate="0.8"
            :show-empty-view-reload-when-error="false"
            :empty-view-img-style="{ width: '308rpx', height: '308rpx' }"
            empty-view-error-img="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/1c53b8aed0c74201bb092265803a1d48.png"
            empty-view-img="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/987eadb1d50949a0a7e25dbbd99abe30.png"
            empty-view-error-text="暂无数据"
            bg-color="#fff "
            v-model="dataList"
            @query="queryList"
        >
            <view class="headBox" slot="top">
                <!-- 搜索 -->
                <view class="search flex_wrap">
                    <view class="search_t">
                        <view
                            style="width: 490rpx; margin: 10rpx 0 0 20rpx"
                            @click="doSearch"
                        >
                            <u-input
                                prefixIcon="search"
                                border="none"
                                v-model="name"
                                prefixIconStyle="font-size: 48rpx;color: #999"
                                placeholderStyle="font-size: 28rpx;color: #999"
                                :customStyle="{ background: '#F6F6F6' }"
                                placeholder="点击搜索"
                            ></u-input>
                        </view>
                        <view class="search_type" @click="doSearch">
                            搜索
                        </view>
                    </view>
                </view>
            </view>
            <!-- 主体部分 -->
            <view class="body">
                <u--text
                    prefixIcon="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2024/08/28/604207d9387640cc947e0f65bc7a668d.png"
                    iconStyle="font-size: 32rpx;margin-right:10rpx"
                    color="#3D3D3D"
                    size="16"
                    block
                    bold
                    text="热门场地"
                ></u--text>
                <view class="rightGoods">
                    <view
                        class="item"
                        @tap="to_goodsDetail(item.id)"
                        v-for="(item, index) in dataList"
                        :key="index"
                    >
                        <u-image
                            height="180rpx"
                            width="180rpx"
                            :src="item.logoUrl"
                            mode="aspectFill"
                            radius="10rpx"
                        />
                        <view class="celldetail-t">
                            <view class="goodName">{{ item.name }}</view>
                            <view
                                class="goodName"
                                style="
                                    color: #777777;
                                    font-size: 28rpx;
                                    font-weight: 400;
                                "
                                >{{ item.address }}</view
                            >
                            <view class="celldetail_money">
                                <text v-for="v in item.hospitalLabel">{{
                                    v
                                }}</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </z-paging>
    </view>
</template>

<script>
import { getHospitalList } from "@/api/physical.js";
import { mapState } from "vuex";
import caches from "@/config/caches.js";
export default {
    data() {
        return {
            name: "",
            dataList: [],
        };
    },
	onLoad(op) {
		uni.setNavigationBarTitle({ title: op.title });
	},
    methods: {
        // 跳转搜索页面
        doSearch() {
            this.queryList();
        },
        to_goodsDetail(e) {
            uni.$u.route({
                url: `pages_physical/hospital/index?id=${e}`,
            });
        },
        async queryList(pageNo = 1, pageSize = 10) {
            this.goodsData = {
                name: this.name,
                pageNum: pageNo,
                pageSize: pageSize,
            };

            const result = await getHospitalList(this.goodsData);
            //   分页之后，数据拼接
            this.dataList = result.data.rows.map((v) => ({
                ...v,
                hospitalLabel: v.hospitalLabel
                    ? v.hospitalLabel.split(",")
                    : [],
            }));
            this.$refs.paging.completeByTotal(this.dataList, result.data.total);
        },
    },
};
</script>

<style lang="scss">
.body {
    padding: 0 30rpx;
    .rightGoods {
        width: 100%;
        box-sizing: border-box;
        .item {
            background-color: #fff;
            margin-bottom: 24rpx;
            margin-top: 24rpx;
            border-radius: 16rpx;
            display: flex;
            padding: 12rpx;
            // box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.06);
            .celldetail-t {
                width: 100%;
                padding: 0 6rpx 0 12rpx;
                box-sizing: border-box;

                .goodName {
                    width: 100%;
                    font-size: 32rpx;
                    color: #3d3d3d;
                    text-overflow: -o-ellipsis-lastline;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 1;
                    line-clamp: 1;
                    -webkit-box-orient: vertical;
                    margin-bottom: 20rpx;
                    font-weight: 600;
                }
                .celldetail_money {
                    text {
                        color: #588bf3;
                        font-size: 24rpx;
                        font-weight: 400;
                        border: 1px solid #588bf3;
                        padding: 0rpx 6rpx;
                        border-radius: 8rpx;
                        margin-right: 10rpx;
                    }
                }
            }
        }
    }
}
.headBox {
    position: relative;
    background-color: #fff;
}

.search {
    padding: 40rpx 28rpx 30rpx;
    position: relative;
}

.search_t {
    background: #f6f6f6;
    border-radius: 64rpx;
    font-weight: none;
    display: flex;
    justify-content: space-between;
    flex: 1;
}

.search_type {
    width: 104rpx;
    height: 64rpx;
    background: #588bf3;
    border-radius: 0px 64rpx 64rpx 0px;
    color: #fff;
    line-height: 64rpx;
    font-size: 28rpx;
    font-weight: bold;
    text-align: center;
}
.grid-text {
    font-weight: 400;
    font-size: 28rpx;
    color: #3d3d3d;
}
</style>
